Something was tried. Code unprovided.gifstv88 wrote: ↑Tue Apr 05, 2022 10:54 pmHello,
How could i make the Option Value Name to show on hovering instead of just text next to the option ?
I am using OpenCart 3.0.2.0 - default theme - i tried something in product.twig and stylesheet.css but without succes .
Tried to modify product.twig on line 188
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
You could also create a new service request in the Commercial Support section of the forum to develop your projects as a custom job.gifstv88 wrote: ↑Tue Apr 05, 2022 11:51 pmI,m not a developer ,but i,m learning.
product.twing -
<div class="name_show[{{ option_value.name }}] /div>
stylesheet.css
.name_show {position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.name_show {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.name_show {
visibility: visible;
}
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
<img src="{{ option_value.image }}" title="{{ option_value.name }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" />Code: Select all
<style>
.hoverdiv {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.hoverdiv .hovertext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position hover text */
top: 50px;
right: 50%;
position: absolute;
z-index: 1;
}
.hoverdiv:hover .hovertext {
visibility: visible;
}
</style>Code: Select all
<div class="hoverdiv">Hover over me
<span class="hovertext">This is the text that will display{{ option_value.name }}</span>
<img src="my.jpg" alt="my image" title="my image" class="img-responsive">
</div>There is absolutely nothing wrong with that reply as there are no reason to duplicate a request as it is differed from the forum rules. Suggesting OP users to create service requests on the forum is also implicit in the forum rules when it comes to custom codes.gifstv88 wrote: ↑Wed Apr 06, 2022 1:26 amPlease do to have as a back up in the future
Thank you for you time
I started a new thread because straightlight suggested - "You could also create a new service request in the Commercial Support section of the forum to develop your projects as a custom job."
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
{% if option.type == 'radio' %}
<div class="form-group{% if option.required %} required {% endif %}">
<label class="control-label">{{ option.name }}</label>
<div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
<div class="radio">
<label>
<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
{% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %} </label>
</div>
{% endfor %} </div>
</div>
{% endif %}Code: Select all
{% if option.type == 'radio' %}
<div class="form-group{% if option.required %} required {% endif %}">
<label class="control-label">{{ option.name }}</label>
<div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
<div class="radio">
<label>
<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
{% if option_value.image %}
<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" title ="{{ option_value.name }} {% if option_value.price %}({{ option_value.price_prefix }}{{ option_value.price }}){% endif %}" class="img-thumbnail" />
{% endif %}
</label>
</div>
{% endfor %}
</div>
</div>
{% endif %}and_voila.png (41.49 KiB) Viewed 1391 times
Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer
Code: Select all
{% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
{{ option_value.name }}Code: Select all
{% if option_value.image %} <spanshow><img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> </spanshow>{% endif %}
<newshow> {{ option_value.name }} </newshow>Code: Select all
newshow {
padding: 20px;
display: none;
}
spanshow:hover + newshow {
display: inline-block;
}Other than the code structure and method block alignments, seems to be fine. However:mikeinterserv wrote: ↑Wed Apr 06, 2022 7:30 amHere is a nice css styled version
Its an installable module based on events.
After install can be installed uninstalled from extensions > modules > Option Image Hover Txt
Isn't that a different username in the title as the one you're using since you're posting this package on the topic? ...//author: mwinterserv
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
raman dator cu bere 'href' => 'catalog/view/theme/default/stylesheet/optionsimagehovertxt.css',
Code: Select all
'href' => 'catalog/view/theme/' . $this->getTheme() . '/stylesheet/optionsimagehovertxt.css',
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Probably :-)straightlight wrote: ↑Wed Apr 06, 2022 8:32 amAs for this line in the catalog controller:
shouldn't it be:Code: Select all
'href' => 'catalog/view/theme/default/stylesheet/optionsimagehovertxt.css',
?Code: Select all
'href' => 'catalog/view/theme/' . $this->getTheme() . '/stylesheet/optionsimagehovertxt.css',
Yepstraightlight wrote: ↑Wed Apr 06, 2022 8:28 amIsn't that a different username in the title as the one you're using since you're posting this package on the topic? ...
A bit more alignment and Events identification with comments as per the core. Also added the $this->getTheme() in the styles array.mikeinterserv wrote: ↑Wed Apr 06, 2022 8:41 amYepstraightlight wrote: ↑Wed Apr 06, 2022 8:28 amIsn't that a different username in the title as the one you're using since you're posting this package on the topic? ...
So I changed it :-)
I like to make everyone happy me.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Code: Select all
{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %}this_part.png (25.17 KiB) Viewed 1198 times
Upgrade Service | OC 2.3.0.2 PHP 8 | My Custom OC 3.0.3.8 | Buy me a beer
Perhaps a $this->load->view should be used in case web designers needs to modify the HTML output ...xxvirusxx wrote: ↑Wed Apr 06, 2022 2:30 pmThis part is not removed..Code: Select all
{{ option_value.name }} {% if option_value.price %} ({{ option_value.price_prefix }}{{ option_value.price }}) {% endif %}
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Users browsing this forum: mandom and 43 guests
