Rich-text Reply

Where to Start?

bahamagician 11-16-15

Where to Start?

Hi,

 

I was wondering if somebody here can help me.  I've got an experiment I'd like to run but I don't know where to start.  

 

Currently, on my site, when a user adds an item to the cart, they are instantly directed to the shopping cart.  This is done using a javascript click event.

 

However, I want to test a variation in which when the add to cart button is clicked, they are instead shown a modal window indicating that the item has been added and they are now given the option to continue shopping or to go to the checkout.  

 

How would I implement this?  Would I have to somehow override my existing click function with one from optimizely?  Also, any function I use is going to need the product ID passed to it but it's a dynamic variable generated via ASP.  How would I get access to that variable via Optimizely?

 

Any help would be greatly appreciated.

 

-=Chris

JDahlinANF 11-16-15
 

Re: Where to Start?

You are on the right track.

 

1- Override the existing click event with a new one that opens the modal.

2- To create the modal correctly, the click event would need to grab the ProductId from the page (and maybe the product name, image, price, etc too!)  Though the ID is created by ASP, it exists as a value in the HTML and you should be able to scrape it from the HTML when the user clicks.

 

e.g., if the add-to-bag- button looks like this:

<div class="add-to-bag-button" data-productid="12345">Add To Cart</div>

You would grab the ProductId like:

$('.add-to-bag-button').on('click', function(){ 
console.log($(this).attr('data-productid'));
});

Of course, instead of logging the ProductId to the console you would invoke your modal with the ProductId as a parameter.

 

How you do each of those will depend on how your site currently works and what method you will be using to create the modal.

 

Re: Where to Start?

Thanks for that.  That's exactly what I was looking for!

 

-=Chris