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:
In the above code example, we would dynamically replace [SLUG] with the product URL, so that link would become "/product#!/product-URL"
**Full List of Classnames That Can be Used in Single Product Pages**
Once you have created your single product page, you can use the following classes to access the product data:
*Classname example* *Output*
sr-name Product name
sr-description Product description
sr-strapline Product strapline
sr-price Product price
sr-currency Product currency
sr-dateadded Date product was added
sr-meta Comma seperated list of meta/categories of product
sr-weight Product weight
sr-singleadditem Add to cart link
**Hero Image (Product's Main Image)**
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.
Below is a table of all the image API attributes and their possible values.
sr-imagewidth positive integer
sr-imageheight positive integer
sr-imagefit "crop", "max", "fit", "scale"
Anything within the tags with the *sr-imagegallery* class will be repeated for each image.
Add the name of the product using the class *sr-name* on any element, as shown below.
**Product Currency & Price**
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)
**Add to Cart Button/Link**
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.
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.
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.