Forum

Thread tagged as: Shop
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

The path doesn't need an extension, so you can use /shop/product.php.

Again if you want your product URL to be /shop/products/product-slug your URL pattern should be shop/products/[slug:product].

The problem still remains. I don't think it's getting to use the master template correctly to be honest...

Can you advise why the debug states: "Using template: /templates/pages/attributes/default.html"

and also confirm if this master template code is correct?

<?php perch_layout('shop.header'); ?>

  <div class="brand shop-hero">
    <div class="container">
      <div class="logo-wrapper"><img src="../images/lir-master-light-horiz2.png" srcset="../images/lir-master-light-horiz2-p-1080.png 1080w, ../images/lir-master-light-horiz2-p-1600.png 1600w, ../images/lir-master-light-horiz2.png 1687w" sizes="(max-width: 479px) 72vw, (max-width: 991px) 40vw, 32vw" class="logo"></div>
    </div>
  </div>
  <div class="container"></div>
  <div class="product">
    <div class="container">
      <div class="blog-posting w-row">
        <div class="left-col w-col w-col-4">

                 <?php perch_categories([
                'template' => 'category.html',
                'category' => 'shop/'.perch_get('category'),
          ]
            ); ?>
            <a href="../shop/index.php" class="button b2b w-button">back to shop</a>
          <div class="share">
            <h3>share this post</h3>
          </div>
          <div class="sharethis">
            <div class="sharethiscode w-embed">
              <div class="sharethis-inline-share-buttons"></div>
            </div>
          </div>
        </div>
        <div class="right-col w-col w-col-8">

            <?php perch_shop_product(perch_get('product'));?>


        </div>
      </div>
    </div>
  </div>
<?php perch_layout('blog.footer'); ?>

Hussein Al Hammad said:

Since you are using Runway, you don't to include the Perch runtime file. So you can remove this:

<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php'); ?>

Since you are using perch_get('product'), your route should be:

shop/products/[slug:product]

According to this article you do need to include the string?? https://docs.grabaperch.com/perch/pages-and-nav/pages/master-pages/

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Can you advise why the debug states: "Using template: /templates/pages/attributes/default.html"

This refers to the page attributes template.

and also confirm if this master template code is correct?

Let's focus on the main subject of the thread which is getting the product detail page to work. There's nothing on there I see that would cause a 404, if that's what you're asking.

Okay well I'm stumped as to why I keep getting 404s. Would the website having an SSL cert installed affect this? The perch config file is reflected to recognise this + other static pages have the

<?php PerchSystem::force_ssl(); ?>

Can the pages app be affected by this? I appears to load as a HTTPS on the browser, just doesn't load the template.

Hi Hussein, I've managed to resolve the 404 error. It was actually an incorrectly named .htaccess file was the culprit. So , managing to get the page created. The basic /shop/product.php template page is displaying okay, however when I click into a slug page i.e. /shop/products/slug/ it throws up the following debug error:

Debug Message - Perch Runway 3.1.2
[9] SELECT p.pagePath, pr.routePattern, pr.routeRegExp, p.pageTemplate, pr.routeOrder, s.settingValue AS siteOffline FROM perch3_pages p LEFT JOIN perch3_page_routes pr ON p.pageID=pr.pageID LEFT JOIN perch3_settings s ON s.settingID='siteOffline' UNION SELECT NULL AS pagePath, pr2.routePattern, pr2.routeRegExp, pr2.templatePath AS pageTemplate, pr2.routeOrder, NULL AS siteOffline FROM perch3_page_routes pr2 WHERE templateID!=0 ORDER BY routeOrder ASC, pagePath ASC
Matched pageless route: shop/products/[slug:product]
Using master page: /templates/pages/product.php
Page arguments:
Array
(
    [0] => /shop/products/lir-desert-box-145g
    [product] => lir-desert-box-145g
    [1] => lir-desert-box-145g
)
[46] SELECT DISTINCT settingID, settingValue FROM perch3_settings WHERE userID=0
[1] SELECT * FROM perch3_shop_cart WHERE cartID=254
[1] SELECT * FROM perch3_shop_cart WHERE cartID=254
[nil] SELECT * FROM perch3_shop_sales WHERE saleFrom<='2018-09-03 14:39:00' AND saleTo>'2018-09-03 14:39:00' AND saleActive=1 AND saleDeleted IS NULL ORDER BY saleOrder ASC
Request time: 0.1104
Process time: 0.1094
Memory: 2.1209
Array
(
    [type] => 2
    [message] => include(): Failed opening '/var/www/vhosts/142/1004491/webspace/httpdocs/perch/templates/pages/product.php' for inclusion (include_path='.:/opt/alt/php71/usr/share/pear')
    [file] => /var/www/vhosts/142/1004491/webspace/httpdocs/perch/core/runway/start.php
    [line] => 43
)

Actually, ignore the above...! :) I renamed the master pages earlier template as it was causing confusion. This is working now, only the actual /shop/products/slug/ is loading without it's css styling applied.

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Ok great!

This is working now, only the actual /shop/products/slug/ is loading without it's css styling applied.

Use the full path for the CSS, e.g.:

<link rel="stylesheet" href="/css/styles.css" type="text/css">

Hussein Al Hammad said:

Ok great!

This is working now, only the actual /shop/products/slug/ is loading without it's css styling applied.

Use the full path for the CSS, e.g.:

<link rel="stylesheet" href="/css/styles.css" type="text/css">

Actually, I don't think it's CSS, there's still something odd going on here:

Product page created on template loads perfect: https://www.lirchocolates.com/shop/product.php

Slug page within this is loading with broken elements. Inspect window suggests more 404 errors: https://www.lirchocolates.com/shop/products/lir-desert-box-145g/

How come the template page is now loading good but not the slug page?

Drew McLellan

Drew McLellan 2638 points
Perch Support

You have CSS links like this:

<link href="../css/normalize.css" rel="stylesheet" type="text/css">

which need to be root-relative so that they work at any level in the site:

<link href="/css/normalize.css" rel="stylesheet" type="text/css">
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

You are using relative paths:

<div class="logo-wrapper"><img src="../images/lir-master-light-horiz2.png" srcset="../images/lir-master-light-horiz2-p-1080.png 1080w, ../images/lir-master-light-horiz2-p-1600.png 1600w, ../images/lir-master-light-horiz2.png 1687w" sizes="(max-width: 479px) 72vw, (max-width: 991px) 40vw, 32vw" class="logo"></div>
</div>

Your paths should start with slash e.g. src="/images/lir-master-light-horiz2.png"

Hussein Al Hammad said:

You are using relative paths:

<div class="logo-wrapper"><img src="../images/lir-master-light-horiz2.png" srcset="../images/lir-master-light-horiz2-p-1080.png 1080w, ../images/lir-master-light-horiz2-p-1600.png 1600w, ../images/lir-master-light-horiz2.png 1687w" sizes="(max-width: 479px) 72vw, (max-width: 991px) 40vw, 32vw" class="logo"></div>
</div>

Your paths should start with slash e.g. src="/images/lir-master-light-horiz2.png" Okay! that's my bad :) fixed now to root. If you refresh that SKU page, you'll notice the page loads fine but the actual SKU still doesn't load as expected. Do I now need to adjust the below array by passing in my template for this 'product_detail.html'

<?php perch_shop_product(perch_get('product'));?>

or is it the product.html template that I need to alter? I basically just want it to render the title, image, description and buy-now button

This is what my product_detail template looks like:

         <div class="blog-image-wrapper">
            <h2 class="shop-product-heading"><perch:shop id="title" type="text" /></h2><img src="<perch:shop type="image" id="prodImage1" class="blog-feature-image"></div>
          <div class="gallery-flex-wrap"></div>
          <div class="blog-post-wrapper">
            <<perch:shop id="description" type="text" /> 
          </div>
          <div class="shopify-wrapper">
            <div class="shopify-buy-price">
              <div class="text-block">€<span class="price"><perch:shop id="price" type="shop_currency_value"</span> inc VAT</div>
            </div>
            <div class="w-form">
              <form id="email-form" name="email-form" data-name="Email Form"><select id="Box-Size" name="Box-Size" data-name="Box Size" class="shopify-select w-select"><option value="">Choose Box Size</option><option value="First">First Choice</option><option value="Second">Second Choice</option></select></form>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div><a href="#" class="button buy-now w-button">add to cart</a></div>

I suppose to simplify my question.... currently it's set to

 <?php perch_shop_product(perch_get('product'));?>

How do I now tell Perch to pull specific info from a product template called product_detail.html? Do I still need to call that ('product') variable?

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Assuming your template is templates/shop/products/product_detail.html:

perch_shop_product(perch_get('product'), [
'template' => 'products/product_detail.html'
]);

Hussein, you've been a massive help! Thank you for your patience. It's pretty much there now. Just need to figure out minor things like why the product image is not displaying and why the description is wrapping <p> tags any ideas on the image?

detail template

         <div class="blog-image-wrapper">
            <h2 class="shop-product-heading"><perch:shop id="title" type="text" /></h2><img src="<perch:shop type="image" id="prodImage1" /> class="blog-feature-image"></div>
          <div class="gallery-flex-wrap"></div>
          <div class="blog-post-wrapper">
            <perch:shop id="description" type="text" /> 
          </div>
          <div class="shopify-wrapper">
            <div class="shopify-buy-price">
              <div class="text-block"><span class="price"><perch:shop id="price" type="shop_currency_value"</span> inc VAT</div>
            </div>
            <div>
              <form id="shop-form" name="shop-form">
                <select id="Box-Size" name="Box-Size" class="shopify-select w-select">
                <option value="">Choose Box Size</option><option value="First">First Choice</option>
                <option value="Second">Second Choice</option></select></form>
              <div class="w-form-done">
                <div>Thank you! Your submission has been received!</div>
              </div>
              <div class="w-form-fail">
                <div>Oops! Something went wrong while submitting the form.</div>
              </div>
            </div><a href="#" class="button buy-now w-button">add to cart</a></div>

list template


<perch:before> <div class="w-col w-col-9"> <div class="w-row"> </perch:before> <div class="w-col w-col-6"> <div data-ix="popup" class="shop-listing"> <a href="/shop/products/<perch:shop id="slug" type="slug" />/" data-ix="blog-interaction" class="blog-link w-inline-block"> <div class="shop-list-img-wrapper"> <img src="<perch:shop type="image" id="prodImage1" />" class="blog-list-image"> </div> </a> <div class="listing-wrapper"> <h3 class="listing"><perch:shop id="title" type="text" /></h3> </div> <a href="/shop/products/<perch:shop id="slug" type="slug">/"" class="button shop-button w-button">find out more</a> </div> </div> <perch:after> </div> </div> </perch:after>
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Just need to figure out minor things like why the product image is not displaying

You are missing a quote in your image tag. It should be:

<img src="<perch:shop type="image" id="prodImage1" />" class="blog-feature-image">