Forum

Thread tagged as: Api, Add-on-development, PayPal

Extend PayPal Shop - Multiple Images

Hi, I would like to extend the Perch PayPal shop to allow multiple images. I have already modified the shops to allow for several more descriptive fields required by my client but I cannot see where the image is coming from.

Can some point me into the correct place to do this?

Cheers Dennis

Dennis Pickworth 0 points

6 years ago

Graham Street 17 points

6 years ago

You just modify product.html to include as many <perch:shop id="imagex" type="image"> statements as you need. The images are stored in Assets/Buckets and you use them how you need on each product detail page. In the shop we built, we allow for 1 product image and up to 3 popup/larger images that display in a modal slideshow (if there's more than 1 popup) or just an enlargement (if there's only 1 popup image).

Examples ...

https://www.jessiejonesjewellery.co.uk/item.php?s=br007 & https://www.jessiejonesjewellery.co.uk/item.php?s=er016

Dennis Pickworth 0 points

6 years ago

Hi Graham,

Will this extend the back office? If so where is the product.html?

Cheers Dennis

Graham Street 17 points

6 years ago

Sorry but don't understand the first question.

product.html is supplied in the app (under apps/perch_shop_paypal/templates/shop). But you move it to /perch/templates/shop if you want to make your own modifications to it.

Dennis Pickworth 0 points

6 years ago

I am trying to extend the shop in the back area of perch to allow multiple images.

It will currently only except 1 image per product. I have a client that requires more than one image. I have extended the information about the product that they needed and the Database to store this, but I cannot see how the images are dealt with within the perch admin area for the shop.

Graham Street 17 points

6 years ago

Back to my original answer ... you can modify product.html to include additional images and hold them all in Assets, giving the customer the ability to upload as many as are needed and generate thumbnails for them too. Its like the standard image processing that's in the base Perch product. I happen to use this to create an optional large/popup image of the normal product image. I've extended this further to allow up to 3 of these so there's a slideshow of the larger images for some products. For example, here's the Perch tag in product.html for the the first large/popup image ...

<perch:shop id="productLargeImage1" label="Product Image 1 (Large)" type="image" width="960" height="700" crop="true" bucket="popups" help="First large product image (cropped to 960x700px) for the popup window." suppress="true" order="12" divider-before="Popup Window Images" />

By the way, this is also how you add additional fields that may need to be displayed on the product detail. Like size, colour, length, how to wear, complementary products (and so on). Your earlier reply indicates you have have 'hacked' the Perch database to do this (but I may have misinterpreted your text).

Dennis Pickworth 0 points

6 years ago

OK. I understand that. But how do I know that the base product has more that one image if I don't tell base product it has more than one? This is where the confusion is setting in.

I am use to the likes of OpenCart etc where you select your product and upload multiple images for the product and these are tagged in the database to that product.

I would expect in the perch admin area for the shop /product to look like this;

Title Code Price Description Image Image 2 Image 3 ... options

Do I need to change my way of thinking for this?

Cheers

Graham Street 17 points

6 years ago

Its as flexible as you want it to be. You can add all those fields yourself by adding to product.html.

In my example above, we allow for 3 additional images for each product. It doesn't matter we actually have them as large popup windows. The statements cause the admin page for the product to allow for the extra images to be added but not displayed by default (suppress=true). Further down the product.html template, we test if each image exists and then do something if it does exist. In our case a crossSlide script is created on the fly for the page to display the images.

<script>
$(function() {
$('#largeimage').crossSlide({
  sleep: 4,
  fade: 1.5
}, [
<perch:if exists="productLargeImage1">  { src: '<perch:shop id="productLargeImage1" type="image" />', href:'#' },</perch:if>
<perch:if exists="productLargeImage2">  { src: '<perch:shop id="productLargeImage2" type="image" />', href:'#' },</perch:if>
<perch:if exists="productLargeImage3">  { src: '<perch:shop id="productLargeImage3" type="image" />', href:'#' },</perch:if>
])
});
</script>

I will email you a copy of my product.html template ... Graham

Dennis Pickworth 0 points

6 years ago

OK Thanks.

So i don't need to extend the the paypal shop app then to extend the number of images? It is looking in the the template I created to work out how many images I need?

Cheers

Graham Street 17 points

6 years ago

Yes, all the work is done in the template - I sent you mine and a PDF of what the admin looks like for a product.

Dennis Pickworth 0 points

6 years ago

Many thanks for the help Graham. It is greatly appreciated.