Navigation and Cart integration

[dioni2a]

Hey Team,

Really enjoying WP eStore, thanks!

I’m using wp estore 5.2.0 on a WP 3.1.2 site. I want to set up my cart as follows:

– A main page with a list of items for sale using fancy Add to Cart button 1 and the fancy cart that shows only when there are items in it.

– A number of full-length sales pages that are linked from the title description in the fancy buttons in the previous bullet.

I want it so that if the visitor clicks on the title for more information, the new sales page opens up in a new window. At the bottom of that sales page, I’d like to have an Add to Cart button that if they click it, the sales page closes and the visitor is returned to the list page, with the cart now visible and updated with the item.

Conceivably, the person could go through this process for each and every item in the list page, adding them one at a time to the cart, either directly from the fancy button’s Add to Cart button on the list page, or by clicking the button’s title link, reading the sales page, and clicking the Add to Cart button on the sales page, then being returned to the list page with the new item added.

How do I do this?

Thanks for your help.

Warmly,

Dion

[amin007]

“I want it so that if the visitor clicks on the title for more information, the new sales page opens up in a new window.” – By new window do you mean an overlay or lightbox type effect or just a completely new browser window (a new tab)?

[dioni2a]

Hey Amin,

Although the idea of a lightbox or overlay is not out of the question, I was actually thinking a completely new browser window/tab.

[amin007]

To open a new browser window you simply have to add target=”_blank” attribute to a link.

Open the “eStore_misc_functions.php” file and look for the line of code:

$output .= '<div class="eStore-product-description"><div class="eStore-product-name"><a href="'.$ret_product->product_url.'">'.$ret_product->name.'</a></div>';

Once you find it change it to the following and that should do the job:

$output .= '<div class="eStore-product-description"><div class="eStore-product-name"><a href="'.$ret_product->product_url.'" target="_blank">'.$ret_product->name.'</a></div>';

[dioni2a]

Thanks for this part Amin,

But will this also cause the newly opened sales page to CLOSE after the Add to Cart button is clicked? Because it doesn’t currently close automatically if I click the button after manually opening the sales page in a new window.

[dioni2a]

And also, will it cause the original product list page to update and show the cart?

[amin007]

Thats how browsers work. When you open a new browser window/tab it is a completely separate instance and has no knowledge of the other windows/tab. You can programmatically close a browser window using JavaScript but that will require Javascript coding knowledge on your part if you want to do that.

[dioni2a]

I’ve dabbled very slightly in javascript; I’m a bit more comfortable in jQuery. But perhaps I’m hitting this from the wrong angle Amin. Let me try to give you the user experience I’m going for, and perhaps you could suggest the right approach with WP eStore.

As the fancy button 1 uses the hyperlink title, I thought it would be great for the user to see this list of products at a glance. Then if they want to know more about a particular product, they can click the title to launch a full-on sales page that might include copy, graphics, even video. Then after they’re all excited and ready to buy, I want to make it as simple as possible for them to add the product to the shopping cart while still maintaining the ability to add other items.

Perhaps we should think about going back in the opposite direction to what you mentioned initially? Have the list of products on page 1, then if they want to know more about a product, they click the link and the sales page opens in a lightbox, with NO Add to Cart button on the lightbox page, but just a return to the main listing button that closes the lightbox.

How would I set up your fancy button 1 title to open the link in a lightbox? And do you have a recommended wp lightbox plugin for that?

Thanks for your insight and time here Amin, I really appreciate it.

[amin007]

I think your best option is to go via the JQuery lightbox path. So what you do is load the product details page (an external page) in a lightbox when the link is clicked. This will work similar to what happens when you click on an image and the lightbox pops up then you can close it and still stay in the same page. In your case instead of the image you need to show the external page. I think there are a few JQuery libraries out there that can pull an external page into and iframe and load it in a lightbox.

So the first thing you will need to do is setup a prototype where you can click a link and some external page gets loaded in a lightbox. Once you have that working then you can move to the next step of adding this to the link of the product.

[dioni2a]

Okay Amin! I finally found a plugin that works for all my needs: Easy FancyBox. I can now launch iframe lightboxes by adding class="fancybox-iframe"

How do I now integrate that into the fancy Add to Cart button 1 code?

[amin007]

Find the following function in “eStore_misc_functions.php” file and start reading the code then modify as you see fit:

function show_product_fancy_style

The above function is what displays the fancy1 product display.

[dioni2a]

Worked perfectly Amin, thanks so much!

[Author]

Posts