Can't integrate code correctly

HTML & CSS
1

I am trying to integrate these two codes into my site:

<!-- VinoShipper Wine List Integration -->
<div id="vs-winelist"></div>
<script type="text/javascript">
var vsDisableResize = false;
var vsCssUrl = "";
var vsWineryId = 1302;
</script>
<script src="https://vinoshipper.com/iframe/v3/injector.js"></script>
<!-- End VinoShipper Wine List Integration  -->

<!-- VinoShipper Wine Club Sign Up Integration -->
<div id="vs-wineclub-signup"></div>
<script type="text/javascript">
var vsDisableResize = false;
var vsCssUrl = "";
var vsWineryId = 1302;
</script>
<script src="https://vinoshipper.com/iframe/v3/injector.js"></script>
<!-- End VinoShipper Wine Club Sign Up Integration -->

I assumed putting these codes like this would work:

<!-- VinoShipper Wine List Integration -->
<div id="vs-winelist"></div>
<div id="vs-wineclub-signup"></div>
<script type="text/javascript">
var vsDisableResize = false;
var vsCssUrl = "";
var vsWineryId = 1302;
</script>
<script src="https://vinoshipper.com/iframe/v3/injector.js"></script>
<!-- End VinoShipper Wine List Integration  -->

But this is not working, both widgets seem to be overlapping. See here: https://www.screencast.com/t/ePLrpCEs

Could you please help me understand what I’m doing wrong with the code?

2

Hi there meldominguezx,

and a warm welcome to these forums. :winky:

I would suggest that, as you are using some premade widgets,
that your best bet would be to take this problem directly to the…

VinoShipper Getting Started Page.

…for their implementation instructions. :biggrin:

coothead

3

Thanks, but does the code look good to you? is there something obvious that could be wrong with the code I’m using?

4

Hi there meldominguezx,

I cannot see anything, in particular, wrong with the HTML that you have used. :winky:

But, how it is manipulated is, of course, totally within the hands of a third party…

https://vinoshipper.com/

…hence my suggestion. :biggrin:

coothead

5

Thanks so much. I will contact them for sure. Just wanted to know that my way of using the code was not incorrect.

6

Hi there meldominguezx
,[quote]
Just wanted to know that my way of using the code was not incorrect.
[/quote]

I did not actually say that it was correct. :wonky:

Because I could not see anything wrong with it must not be taken to mean
that it will necessarily be the correct coding for “Vinoshipper.com”. :winky:

coothead

7

Interesting… Thanks so much for giving the extra explanation. I will contact them to see what’s going on. Thanks.

8

I think the first thing I would try is adding a path to a custom CSS file to this variable

var vsCssUrl = "";
1 Like
9

Hi there meldominguezx,

As this problem may be of relevance to other members or visitors.
please let us know how you get on, especially if you are given a
satisfactory solution. :winky:

coothead

10

Thanks for your reply. In their instructions they provide this url to add to that variable: https://www.screencast.com/t/sehBYoAw6R

/static/css/iframe/v2/wine-cards-regular.css

But even with that, they still overlap.

11

Will do. Thanks so much!

12

Hi there meldominguezx,

is it possible that this would suit your needs…

<script>
    var vsDisableResize = true;
    var vsCssUrl = "";
    var vsWineryId = 1302;
</script>

It is rather messy though, as it give the page three scrollbars. :eyebrows:

coothead

13

They already replied and said that each widget must go on its own page otherwise they won’t work.

14

So, does that solution make you unhappy?

coothead

15

The default CSS is a bit unfriendly with the rules that take the widget out of the flow
https://vinoshipper.com/static/css/iframe/v2/injector.css
The image you linked to shows a couple of alternative CSS files but they don’t look to address the issues you’re having. I tried to look at the folder contents to see what else might be available, but it doesn’t show folder content and I can’t guess what other files might be named.

In any case, I think you could create your own CSS file and use that. It would probably be a good idea to copy the default CSS file and change only the rules you need to change.

1 Like
16

Not really, but I’m not knowledgeable enough to make edits and make it work like that.

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.