To create a single page for each product, you only need to create one template or view in your website with a generic URL, such as yourdomain.com/product.
Then, you would feed the product slug to the URL. It is used by Shoprocket as an identifier, but in a nice format that you can read.
To test this, you would simply navigate to your new product page, and append the slug/URL of a product with #!/ such as yourdomain.com/product#!/hello-world-product.
Of course, you'll want to be able to automatically link customers to the product pages without typing in URLs, so this can be achieved within your "sr-block" code snippet with the tag [SLUG].
You can create a link to the individual product page from within your product list like this:
<!-- SHOPROCKET SR-BLOCK START --> <div class="sr-block" sr-meta="" sr-show-max="99"> <div class="sr-item"> <div class="sr-name">[NAME]</div> <div class="sr-price">[CURRENCY][PRICE]</div> <a href="/product#!/[SLUG]">View product</a> </div> </div> <!-- SHOPROCKET END -->
In the above code example, we would dynamically replace [SLUG] with the product URL, so that link would become "/product#!/product-URL"
Once you have created your single product page, you can use the following classes to access the product data:
Date product was added
Comma seperated list of meta/categories of product
Add to cart link
To add the hero image (the product's main image) to your page, you must use the class sr-heroimage. The image source and alt attributes are automatically added by Shoprocket.
The Shoprocket image conversion API allows you to specify certain image constraints and behaviours via corresponding attributes. For example, you can resize images, crop them, set the quality, add a water mark etc.
In the following example, we return the image 200px wide and 200px in height, cropping the excess. Note: whilst width and height attributes are not required by Shoprocket, adding them to the image tag will help your page render faster.
<img class="sr-heroimage" sr-imagewidth="200" sr-imageheight="200" sr-imagefit="crop">
Below is a table of all the image API attributes and their possible values.
"crop", "max", "fit", "scale"
Anything within the tags with the sr-imagegallery class will be repeated for each image.
Note: this block is slightly different.
We use [SRC] and [NAME] placeholders instead of classes or attributes for the product image source and name. Shoprocket replaces these with the actual values. Also, you must manually construct the image source string with the format shown to use the image API.
<div class="sr-imagegallery"><!-- this wrapper could contain any gallery plugin class you wish --> <a href="[SRC]" > <img src="[SRC]/convert?w=200&h=200&fit=crop" alt="[NAME]" width="200" height="200"> </a> </div>
Add the name of the product using the class sr-name on any element, as shown below.
Add the product price using the class sr-price on any element, as shown below. (Note: we have also added the currency with sr-currency in a span immediately before the price)
<span class="sr-currency"></span><span class="sr-price"></span>
The add to cart button will trigger the Shoprocket modal, allowing the user to choose product options and quantity and add their selection to the basket.
<a class="sr-singleadditem">Add to cart</a>
Note: no product ID is set in this buy button.
When you use our standard buy buttons, they look like this: Buy
The ID in that URL tells Shoprocket which product to add to cart, however as this is a single product page we already know which product you want to add.
You can also show related products on the page using the class sr-related.
The attribute sr-show-max sets the maximum number of products to display.
As with the sr-imagegallery class, some data are only accessible via placeholders. These are [IMAGESRC] and [RELATEDSLUG]. Also, the image API is only accessible by manually supplying the parameters in the image source attribute string. In this example, we use the same page view/template for related products as the single product view (/product). This way you are always using the same template in your website.
<div class="sr-related" sr-show-max="10"> <a href="/product#!/[RELATEDSLUG]"> <img src="[IMAGESRC]/convert?w=200&h=200&fit=crop"> </a> </div>
Which products do we class as related?
By default, we pick products which have the same meta as the current product and where the price is between 40% and 125% of the current product price.
E.G. - If your product was in "shoes" and priced at £10, we would display other products from the "shoes" category where the price was between £4 and £12.50.
Below is a page containing examples of many of the features listed above, which you can see in the source code. Note how it is possible to add your own classes for styling and rearranging or adding html elements.