'Add to cart' function in RoyalSlider?

milamar's Avatar

milamar

09 Oct, 2018 04:30 PM

I'm a photographer and I would like to add easily a link or a button ''Add to cart'' to all my photos in RoyalsSlider. It could be hanging for example in the bottom left corner of the screen. When clicked, the link or button would send the particular photo ID to my shopping cart platform.

Do you have a solution in mind? I think it could interest many people out there using RoyalSlider.

Thanks in advance!
Michel

  1. Support Staff 1 Posted by Dmitry Semenov on 09 Oct, 2018 04:51 PM

    Dmitry Semenov's Avatar

    Hello,

    You'll need WordPress e-commerce plugin to sell photos, such as WooCommerce or Easy Digital Downloads.

    After you created products within them you may use RoyalSlider to display photos http://help.dimsemenov.com/kb/wordpress-royalslider-tutorials/wp-cr...

  2. 2 Posted by milamar on 09 Oct, 2018 05:24 PM

    milamar's Avatar

    I should have explain in my suggestion/question that I'm not using WordPress. I have my own website developped with dreamweaver and I am planning to add SnipCart shopping cart platform to it..

  3. 3 Posted by milamar on 10 Oct, 2018 12:54 AM

    milamar's Avatar

    I'm sorry but I don't understand how the tutorial you showed here can help me with my need. I was able to add a text (Add to cart) in the bottom left corner of the slider but I'm not able to activate it as a link or a button and be able to send the photo ID to my SnipCart shopping platform when it's clicked. Can you help me?

  4. Support Staff 4 Posted by Dmitry Semenov on 10 Oct, 2018 05:02 AM

    Dmitry Semenov's Avatar

    Ah, I'm sorry, for some reason I thought that you're asking about WordPress.

    There are multiple ways to add a button to each slide/image, for example you may place it within global caption , check this jsfiddle - http://jsfiddle.net/DmitrySemenov/6wpjv5tL/

  5. 5 Posted by milamar on 10 Oct, 2018 09:57 PM

    milamar's Avatar

    It worked great! Thanks Dmitry :)

    One last thing: when I click on my 'Add to cart' button, the SnipCart Popup is showing fine when I'm in standard mode. But in FullScreen mode, the popup is not showing. I have to go back to standard mode to see it. I tried to change the z-index but with no success. Do you have an idea what might be wrong?

  6. Support Staff 6 Posted by Dmitry Semenov on 11 Oct, 2018 05:12 AM

    Dmitry Semenov's Avatar

    You can modify z-index of the slider in file royalslider.css, within block .royalSlider.rsFullscreen.

  7. 7 Posted by milamar on 11 Oct, 2018 01:33 PM

    milamar's Avatar

    Super! everything works well now!

    One last thing I need to do is to send the current image file name to SnipCart. I looked in the API and found: ''slider.slides // array, contains all data about each slide'' but did not find how I can access this array to get the current file name. Do you have this somewhere?

    After this, I will leave you in peace for some time :)

    Thanks again!

  8. Support Staff 8 Posted by Dmitry Semenov on 11 Oct, 2018 06:34 PM

    Dmitry Semenov's Avatar

    You can access current slide object like so:

    $('.royalSlider').data('royalSlider').currSlide
    

    You may log it in a console to see which data is available.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac