Checkout progress bar not showing properly

  • Posts: 51
  • Thank you received: 2
8 years 1 month ago #253160

-- url of the page with the problem -- : okosjokolade.no
-- HikaShop version -- : 2.6.4
-- Joomla version -- : 3.6.2

When I select the "Display checkout progress bar" option, I don't get a progress bar, but some other strange looking thing. I have another older installation, and here it is showing at least something more in the right direction. See the two pictures attached. It seems like the right pictures are still there in the proper folder... I guess maybe I (unintentionally) at some point may have screwed up some file :oops: , any idea how to fix this?


Attachments:
Last edit: 8 years 1 month ago by Odda.

Please Log in or Create an account to join the conversation.

  • Posts: 4748
  • Thank you received: 644
  • MODERATOR
8 years 1 month ago #253166

Hello,

"I guess maybe I (unintentionally) at some point may have screwed up some file :oops:"


From what you tell, I just had a look on your checkout, and the Html elements seems stranges, so I think the most simple is to check this point :
- Go to Components => HikaShop => Configuration, and in Display dropdown select Views.
- Use the three dropdown filters with : Checkout / YOUR TEMPLATE / Front end
- If you see some little trash icon, that means that you have some override views...
=> Try to remove ALL this override, in order to check if that solve your issue, save the file content on your own computer and click on this little trash icon to remove it).
OR, if the "Custom code" is in HikaShop files core, only one solution => Updates your HikaShop version.
That must erase ALL custom code on HikaShop Files (EXCEPT HikaShop override views).

Hope that will help you to go more far on this issue.

Regards.

Last edit: 8 years 1 month ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 51
  • Thank you received: 2
8 years 1 month ago #253328

I updated Hikashop before posting the question, so I guess the answer is in one of the override files then... When filtering with Checkout / MY TEMPLATE / Front end I get 29 files, almost all of them with override code (for some reason..). Any idea which of the files is relevant to the checkout progress bar? I've tried to delete the custom code in most of the files, one by one, but with no luck..

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 1 month ago #253340

Hi,

It's the file "step.php". Try to rename it in order to deactivate all the customization and old view code so that it uses the new version of the view file.

Please Log in or Create an account to join the conversation.

  • Posts: 51
  • Thank you received: 2
8 years 1 month ago #253599

There is now no customization to the file "step.php", and the checkout page still looks like the picture from my first post... Any more ideas...?

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 1 month ago #253609

Hi,

I had a look at the progress bar on your website.
If you look at the HikaShop CSS file that you use okosjokolade.no/media/com_hikashop/css/f...nd_default_roger.css you can see that you're missing all this CSS :

.hikashop_wizardbar {
	background-color: #f9f9f9;
	border: 1px solid #d4d4d4;
	margin-bottom: 8px;
	-webkit-border-radius: 4px;
		 -moz-border-radius: 4px;
					border-radius: 4px;
	*zoom: 1;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
		 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

.hikashop_wizardbar:before,
.hikashop_wizardbar:after {
	display: table;
	line-height: 0;
	content: "";
}

.hikashop_wizardbar:after {
	clear: both;
}

.hikashop_wizardbar ul {
	padding: 0;
	margin: 0;
	list-style: none outside none;
}

.hikashop_wizardbar ul li {
	position: relative;
	float: left;
	height: 46px;
	padding: 0 20px 0 30px;
	margin: 0;
	font-size: 16px;
	line-height: 46px;
	color: #999999;
	cursor: default;
	background: #ededed;
}
.hikashop_wizardbar ul li a {
	color: #999999;
}

.hikashop_wizardbar ul li .hikashop_chevron {
	position: absolute;
	top: 0;
	right: -14px;
	display: block;
	border: 24px solid transparent;
	border-right: 0;
	border-left: 14px solid #d4d4d4;
}

.hikashop_wizardbar ul li .hikashop_chevron:before {
	position: absolute;
	top: -24px;
	right: 1px;
	display: block;
	border: 24px solid transparent;
	border-right: 0;
	border-left: 14px solid #ededed;
	content: "";
}

.hikashop_wizardbar ul li.hikashop_cart_step_finished {
	color: #468847;
	background: #f3f4f5;
}
.hikashop_wizardbar ul li.hikashop_cart_step_finished a {
	color: #468847;
}

.hikashop_wizardbar ul li.hikashop_cart_step_finished:hover {
	cursor: pointer;
	background: #e7eff8;
}

.hikashop_wizardbar ul li.hikashop_cart_step_finished:hover .hikashop_chevron:before {
	border-left: 14px solid #e7eff8;
}

.hikashop_wizardbar ul li.hikashop_cart_step_finished .hikashop_chevron:before {
	border-left: 14px solid #f3f4f5;
}

.hikashop_wizardbar ul li.hikashop_cart_step_current {
	color: #3a87ad;
	background: #f1f6fc;
}
.hikashop_wizardbar ul li.hikashop_cart_step_current a {
	color: #3a87ad;
}

.hikashop_wizardbar ul li.hikashop_cart_step_current .hikashop_chevron:before {
	border-left: 14px solid #f1f6fc;
}

.hikashop_wizardbar ul li .badge {
	margin-right: 8px;
}

.hikashop_wizardbar ul li:nth-child(1) {
	z-index: 10;
	padding-left: 20px;
	border-radius: 4px 0 0 4px;
}

.hikashop_wizardbar ul li:nth-child(2) { z-index: 9; }
.hikashop_wizardbar ul li:nth-child(3) { z-index: 8; }
.hikashop_wizardbar ul li:nth-child(4) { z-index: 7; }
.hikashop_wizardbar ul li:nth-child(5) { z-index: 6; }
.hikashop_wizardbar ul li:nth-child(6) { z-index: 5; }
.hikashop_wizardbar ul li:nth-child(7) { z-index: 4; }
.hikashop_wizardbar ul li:nth-child(8) { z-index: 3; }
.hikashop_wizardbar ul li:nth-child(9) { z-index: 2; }
.hikashop_wizardbar ul li:nth-child(10) { z-index: 1; }
Which actually is in the default CSS of HikaShop: okosjokolade.no/media/com_hikashop/css/frontend_default.css
So please add it back in your custom CSS file and it should display fine.

Please Log in or Create an account to join the conversation.

  • Posts: 51
  • Thank you received: 2
8 years 4 weeks ago #253882

I did paste the code into my custom CSS-file. Something happend, but still not looking good. I've sent you back end login via contact form regarding my other post. Maybe you could check out this issue as well?

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13378
  • MODERATOR
8 years 4 weeks ago #253906

Hi,

The backend access you provided doesn't allow us to access the HikaShop configuration and it looks like you deactivated the progress bar display. So we can't look at the problem.
Also, please note this is a CSS customization issue...

Please Log in or Create an account to join the conversation.

  • Posts: 51
  • Thank you received: 2
8 years 4 weeks ago #253944

I understand. I have made you Super User temporarily, but I understand if I have to figure it out on my own :-)

Please Log in or Create an account to join the conversation.

  • Posts: 4748
  • Thank you received: 644
  • MODERATOR
8 years 3 weeks ago #254019

Hello,

If you mean the wrong picture display instead of an arrow picture.:
This picture come from your template, can you try to add in your Css, this kind of command :

span.badge.badge-info {
    background: url(../media/com_hikashop/images/wizard/arrow.png);
}

Some Css will be required in order to have a good display indeed!
Note: that you can define yourself your arrow pictures, by define another picture yourself in your Joomla media manager and be define the correct url to your image.

Hope this wqill help you.

Regards

Last edit: 8 years 3 weeks ago by Philip.

Please Log in or Create an account to join the conversation.

Time to create page: 0.085 seconds
Powered by Kunena Forum