OpenCart Community

Posted: **Thu Feb 11, 2016 1:52 am**

Hi

Hoping someone can point me in the right direction. I would like to create a small pop-up box to display some text, on my product description. So when link text is clicked, it brings up a small pop-up box with additional text, eg more information about the fabric.

I have looked in the extension store but there are only have popup extensions when a certain page is visited, or action taken. I want something much simpler.

Can anyone let me know how to do this please?

Thank you

OC2.0.1.1

Posted: **Thu Feb 11, 2016 2:49 am**

If you are comfortable writing html you use the bootstrap modal
http://getbootstrap.com/javascript/#modals
Put the editor in 'source' mode first! </>

Posted: **Thu Feb 11, 2016 3:28 am**

Thanks for getting back to me. I ahve taken a look at the link you sent. I don't know much about html but I think the code for what I want is this:

Code: Select all

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        <p>Body text </p>
      </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

But how do create a link to display this code when some text is clicked?

Thank you for your help.

Posted: **Thu Feb 11, 2016 5:39 am**

I edited the code below to get you started. Untested, from the top of my head

Code: Select all

<!--option button-->
<button class="btn btn-info" data-toggle="modal" data-target="#my-awesome-popup-1">
  button text, for multilingual try <?php echo $button_view; ?>
</button>

<!--option link without button to open modal-->
<a data-toggle="modal" data-target="#my-awesome-popup-1">link text</a>


<div id="my-awesome-popup-1" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Optional title for your popup</h4>
          </div>
          <div class="modal-body">
            <p>some text, links and images</p>
<img src="" alt="popup">
          </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

I'm not sure if php tags work inside the editor, they might get stripped.
You can use instead of text, icons like <i class="fa fa-eye-open"></i>

If you want more modals on the same page, make sure id="xxx" are unique

Check the font-awesome site for possible icons.

Hope it helps, if not you know html now

Posted: **Thu Feb 11, 2016 8:46 pm**

That fantastic! Thank you so much

But the link doesn't work on a mobile display? I am using the option link without a button to open the modal.

I have been taking a look at the site you gave a link for, and I think the Popover seems more suitable and simpler for my purposes. I have tried to edit one of the examples given, to remove the button to open the popover to:

Code: Select all

<a tabindex="0" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content.">Dismissible popover</a>

But the content text is not displayed when the text link is clicked. Only the text 'dismissible popover' is shown when the text is hovered over. What is missing from the code? I removed the button class from the original code, and tried to copy the code you sent, for without the button.

Posted: **Thu Feb 11, 2016 9:45 pm**

I left out the href tag because it might reopen the page.
Try <a href="#" or <a href="#my-awesome-popup"
But the data attribute should open it with or without href.

Posted: **Thu Feb 11, 2016 10:15 pm**

Yes adding the href tag makes it work on mobile and adds the clickable icon!

Please ignore my last message about using a Popover. This works great!

Thanks so much for your help

Posted: **Thu Feb 11, 2016 11:47 pm**

You're welcome.
You can always try out stuff in a standard html file before adding it to OC to save time

Always use the data attributes or else you have to add javascript to make it work.
Cheers

Posted: **Fri Feb 12, 2016 12:18 am**

Ok thanks for the tips. I think I will try out more stuff now that I know the format.

I truly appreciate your time and help.

Posted: **Thu Feb 18, 2016 12:30 am**

Just stumbled across this looking for something else.

Brilliant and easy solution. Thanks artcore!!

OpenCart Community

How to create popup message in product description?

How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?

Re: How to create popup message in product description?